<template>
  <div>
    <el-select
      v-model="value1"
      placeholder="请选择"
      @change="change"
    >
      <el-option
        v-for="item in options"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>

    <el-select
      v-model="value2"
      style="margin-left: 20px;"
      placeholder="请选择"
      @change="change"
    >
      <el-option
        v-for="item in 12"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>
    <el-calendar v-model="value">
      <!-- <template slot="dateCell" slot-scope="{ data }">
        ==={{ data }}
      </template> -->
      <!-- <template #dateCell="{ data }"> ==={{ data }} </template> -->
      <!-- date====单元格的日期   new  Date() -->

      <template v-slot:dateCell="{ date }">
        {{ getDay(date) }}
        <span
          v-if="isWeek(date)"
          style="
            color: #fff;
            background: #fa7c4d;
            border-radius: 50%;
            padding: 4px;
          "
        >休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
      value1: '',
      value2: 5
    }
  },
  computed: {
    options() {
      var y = new Date().getFullYear()
      //   console.log(`qqq`, [...(Array(10))])
      var arr = Array.from(Array(10))
      arr.forEach((item, index) => {
        arr[index] = y + index - 5
      })
      return arr
    }
  },
  methods: {
    getDay(t) {
    //   console.log(`t`, t)
      var day = new Date(t)
      return day.getDate()
    },
    isWeek(t) {
      var day = new Date(t)
      //   console.log(`day.getDay()`, day.getDay())
      if (day.getDay() === 6 || day.getDay() === 0) {
        return true
      } else {
        return false
      }
    },
    change() {
      this.value = new Date(`${this.value1}-${this.value2}`)
    }
  }
}
</script>
<style lang="less" scoped></style>
